<template>
    <div class="container" ref="charts">地图</div>
</template>

<script setup lang="ts" name="CenterTop">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import chinaJson from './china.json';

const charts = ref()
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        title: {
            text: '全国门店分布'
        },
        geo: {
            map: 'china', label: { show: true },
            itemStyle: { areaColor: "white" },
        },
        series: {
            type: 'lines',
            effect: { show: true, symbol: 'arrow', symbolSize: 5, constantSpeed: 30 },
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 1, y2: 1,
                    colorStops: [{ offset: 0, color: 'red' }, { offset: 0.5, color: '#D4237A' }, { offset: 1, color: 'orange' }]
                }
            },
            data: [
                {
                    coords: [[114.298572, 30.584355], [116.405285, 39.904989]],
                    lineStyle: { width: 3, curveness: 0.1 }
                },
                {
                    coords: [[114.298572, 30.584355], [121.472644, 31.231706]],
                    lineStyle: { width: 3, curveness: 0.1 }
                }, {
                    coords: [[114.298572, 30.584355], [113.280637, 23.125178]],
                    lineStyle: { width: 3, curveness: 0.1 }
                }, {
                    coords: [[114.298572, 30.584355], [117.000923, 36.675807]],
                    lineStyle: { width: 3, curveness: 0.1 }
                }, {
                    coords: [[114.298572, 30.584355], [104.065735, 30.659462]],
                    lineStyle: { width: 3, curveness: 0.1 }
                }, {
                    coords: [[114.298572, 30.584355], [101.778916, 36.623178]],
                    lineStyle: { width: 3, curveness: 0.1 }
                }, {
                    coords: [[114.298572, 30.584355], [111.670801, 40.818311]],
                    lineStyle: { width: 3, curveness: 0.1 }
                },
            ]
        }
    })
})
</script>

<style scoped lang="scss"></style>